<template>
  <div class="container">
    <!-- 背景图片 -->
    <div
      class="bg-image"
      :style="{'background': `url('${BG}') no-repeat center/cover`}"
    ></div>

    <!-- 自动滚动表格 -->
    <div class="table-wrapper">
      <table v-if="data.length">
        <thead style="z-index: 999;position: sticky;">
          <tr>
            <th style="width: 10%;text-align:center">订单号</th>
            <th style="width: 10%">物料号</th>
            <th style="width: 10%">物料描述</th>
            <th style="width: 5%">排产数量</th>
            <th style="width: 5%">完成数量</th>
            <th style="width: 15%">计划排产日期</th>
            <th style="width: 15%">计划完成日期</th>
          </tr>
        </thead>
        <tbody>
          <!-- 修正后的滚动结构 -->
          <tr
            v-for="item in data"
            :key="item.id"
          >
            <td style="width: 10%;">{{ item.JM_WORKORDERID }}</td>
            <td
              style="width: 10%"
              class="text-ellipsis"
            >{{ item.MATCODE }}</td>
            <td
              style="width: 10%"
              class="text-ellipsis"
            >{{ item.MATNAME }}</td>
            <td style="width: 5%">{{ item.WOPLANQTY }}</td>
            <td
              style="width: 5%"
              class="text-ellipsis"
            >{{ item.WOCOMPQTY }}</td>
            <td style="width: 15%">{{ item.WOPLANDATE }}</td>
            <td style="width: 15%">{{ item.WOCOMDATE }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import BG from '@/assets/bg.png';
import myAxios from '@/myAxios/myAxios';
// 模拟数据
const generateMockData = () => {
  return new Promise((resolve, reject) => {
    myAxios.get('陈帅廷查询贴片线已排产订单', '').then(res => {
      resolve(res);
    }).catch(err => {
      reject(err);
    });
  });
};

const data = ref([]);
let timer = null;

// 获取数据方法
const fetchData = async () => {
  // 实际项目中替换为axios请求
  let result = await generateMockData();
  data.value = [...result, ...result];
};

// 生命周期
onMounted(() => {
  fetchData();
  timer = setInterval(fetchData, 60 * 1000); // 每分钟刷新
});

onBeforeUnmount(() => {
  clearInterval(timer);
})
</script>

<style scoped>
.container {
  position: relative;
  height: 98vh;
  overflow: hidden;
}

/* 背景图片样式 */
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center/cover; /* 替换实际图片URL */
  filter: brightness(0.8); /* 降低亮度突出内容 */
  z-index: -1;
}

/* 表格容器 */
.table-wrapper {
  position: relative;
  max-width: 90%;
  margin: 0px auto;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 100, 200, 0.2);
  overflow: hidden;
}
/* 修正滚动动画容器 */
tbody {
  display: block;
  animation: scroll 60s linear infinite;
  overflow-y: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 关键属性：固定表格布局 */
  background-color: rgb(197.7, 225.9, 255);
  height: 90vh;
}
/* 内容溢出处理 */
.text-ellipsis {
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 12px 8px !important;
}

/* 表头样式 */
th {
  background: #1a73e8; /* 谷歌蓝 */
  color: white;
  padding: 12px;
  font-size: 16px;
  position: sticky;
  top: 0;
}

/* 表格内容 */
td {
  padding: 12px;
  border-bottom: 1px solid #e0f0ff; /* 浅蓝色边框 */
  text-align: center;
}
tr {
  display: table;
  width: 100%;
}
tr:nth-child(odd) {
  background: rgb(121.3, 187.1, 255); /* 交替行背景色 */
}
tr:nth-child(even) {
  background: rgb(159.5, 206.5, 255); /* 交替行背景色 */
}

/* 自动滚动动画 */
/* .scroll-content {
  animation: scroll 30s linear infinite;
} */

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.loading {
  padding: 20px;
  text-align: center;
  color: #1a73e8;
}
</style>